import QtQuick 2.15
import QtQuick.Layouts 1.15

Rectangle {
    id: root
    color: "transparent"

    property string text: ""
    property int min: -1
    property int max: -1
    property int current: -1
    property int zero: 0

    //获取最终结果
    function getResult(){
        return (myPathView.currentIndex + root.min)
    }

    ColumnLayout{
        anchors.fill: parent

//        Text {
//            visible: (0 !== text.length)
//            text: root.text
//            font.pixelSize: 24
//            font.bold: true
//            color: "#FFFFFF"
//            Layout.preferredHeight: 40
//            Layout.fillWidth: true
//            verticalAlignment: Text.AlignVCenter
//            horizontalAlignment: Text.AlignHCenter
//        }

        Item {
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.margins: 10

            PathView{
                id: myPathView
                anchors.fill: parent
                currentIndex:  (-1 === root.current) ? 0 : (root.current - root.min)
                onCurrentIndexChanged: { root.current = currentIndex + root.min; }
                model: (root.max - root.min + 1)

                delegate:Item{//
                    width:myPathView.width/2
                    height:myPathView.height/myPathView.pathItemCount

                    scale: PathView.iconScale!==undefined?PathView.iconScale:1
                    opacity: PathView.iconOpacity!==undefined?PathView.iconOpacity:1
                    z:PathView.iconZ!==undefined?PathView.iconZ:1
                    transform: Rotation {
                        origin.x: width/2
                        origin.y: height/2
                        axis.x: 1
                        axis.y: 0
                        axis.z: 0
                        angle: PathView.iconAngle!==undefined?PathView.iconAngle:0
                    }

                    Text{
                        id:timeText
                        anchors.centerIn: parent
                        text: String(Number(modelData) + root.min).padStart(root.zero, '0')
                        color: PathView.isCurrentItem ? "#0099ff" : Qt.lighter("#FFFFFF")
                        font.pixelSize: 30
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }
                }

                pathItemCount: 3
                preferredHighlightBegin: 0.5
                preferredHighlightEnd: 0.5
                highlightRangeMode: PathView.StrictlyEnforceRange

                //交互属性，支持拖动等……
                interactive: true
                //滑动速度
                maximumFlickVelocity:1000

                path :pathVertical
                Path{//------------垂直变化------------
                    id:pathVertical
                    property int height: myPathView.height
                    startX: myPathView.width/2

                    PathLine { id:line1; x: pathVertical.startX; y: pathVertical.startY; }
                    PathAttribute { name: "iconZ"; value: 1 }
                    PathAttribute { name: "iconScale"; value: 0.6 }
                    PathAttribute { name: "iconOpacity"; value: 0.3 }
                    PathAttribute { name: "iconAngle"; value: 80  }
                    PathPercent { value: 0 }

                    // start scaling up
                    PathLine { id:line2; x: line1.x; y: line1.y + pathVertical.height; }
                    PathAttribute { name: "iconZ"; value: 2 }
                    PathAttribute { name: "iconScale"; value: 0.8 }
                    PathAttribute { name: "iconOpacity"; value: 0.4 }
                    PathAttribute { name: "iconAngle"; value: 50  }
                    PathPercent { value: 1/4 }

                    // middle point
                    PathLine { x: line2.x; y: line2.y; }
                    PathAttribute { name: "iconZ"; value: 5 }
                    PathAttribute { name: "iconScale"; value: 1.0 }
                    PathAttribute { name: "iconOpacity"; value:1.0 }
                    PathAttribute { name: "iconAngle"; value: 0  }
                    PathPercent { value: 2/4}

                    // start scaling down
                    PathLine { x: line2.x; y: line2.y; }
                    PathAttribute { name: "iconZ"; value: 2 }
                    PathAttribute { name: "iconScale"; value: 0.8}
                    PathAttribute { name: "iconOpacity"; value: 0.4 }
                    PathAttribute { name: "iconAngle"; value: -50  }
                    PathPercent { value: 3/4 }

                    // last point
                    PathLine { x: line2.x; y: line2.y; }
                    PathAttribute { name: "iconZ"; value: 1 }
                    PathAttribute { name: "iconScale"; value: 0.6 }
                    PathAttribute { name: "iconOpacity"; value:0.3 }
                    PathAttribute { name: "iconAngle"; value: -80  }
                    PathPercent { value: 1}
                }

            }

            Item {
                width: parent.width
                height:myPathView.height/myPathView.pathItemCount
                anchors.centerIn: parent

                Rectangle{
                    height: 1
                    color: "#FFFFFF"
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                }

                Rectangle{
                    height: 1
                    color: "#FFFFFF"
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }
}
